@charset "utf-8";
@import "common";
@import "animate";
// .carousel{
// 	background-color: #2b80d9;
// 	.carousel-inner{
// 		.item{			
// 			img{
// 				margin: 0 auto;
// 			}
// 		}
// 	}
// }
.engine{
	//height: 640px;
	background-color: #fbfaf7;
	padding-top: 106px;
	.container{
		background-color: #fbfaf7;
		padding-bottom: 100px;
		background-image: url(../img/index-2.png);
		background-repeat:no-repeat ;
		background-position: 100% calc(100% - 40px);
		//margin-top: 106px;
		>.row{
			h2{
				font-size: 48px;
				color: #0078d7;
				margin-bottom: 24px;
			}
			p{
				font-size: 30px;
				color: #666666;
				
			}
			.col-md-8{
				margin-top: 78px;
				>.row{
					.col-md-6{
						// display: flex;
						// justify-content: flex-start;
						margin-bottom: 46px;
						.eng-imgWarp{
							width: 64px;
							height: 64px;
							background-color: #0078d7;
							border-radius: 4px;
							transition: all 1s;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.eng-imgWarp:hover{
							transform: rotateY(180deg);
							background-color: #C4E3F3;
						}
						.text{
							// margin: 0 0;
							// margin-left: 15px;
							h4{
								font-size: 20px;
								margin-top: 0;
								
							}
							p{
								font-size: 14px;
							}
						}
					}
				}
			}
			.col-md-4{
				
			}
		}
	}
}
.advantage{
	// height: 640px;
	// background-color: #0078D7;
	padding-bottom: 89px;
	background-image: url(../img/index-7.png);
	background-repeat: no-repeat;
	background-position: 15% 70%;
	.container{
		.row{
			.adv-Img{
				margin-top: 190px;
			}
			.adv-Text{
				margin-top: 118px;
				>.row{
					h3{
						font-size: 48px;
						color: #8fc31f;
						margin-bottom: 48px;
					}
					.adv-right{
						margin-bottom: 15px;
						.img-adv{
							width:54px;
							height: 54px;
							border-radius: 50%;
							background-color: #8fc31f;
							display: flex;
							justify-content: center;
							align-items: center;
							transition: all 1s;
						}
						.img-adv:hover{
							transform: rotateY(360deg);
						}
						p{
							font-size: 14px;
							color: #666666;
							padding-top: 20px;
						}
					}
				}
			}
		}
		
	}
}
.product{
	background-color: #0079d7;
	//height: 640px;
	h1{
		text-align: center;
		font-size: 48px;
		color: #fffefe;
		padding-top: 115px;
	}
	.container{
		.row{
			margin-top: 70px;
			.pro-img{
				.img-right{
					padding-top: 20px;
					// width: 66px;
					// height: 66px;
					img{
						
					}
				}
				.text-left{
					h5{
						margin: 0;
						font-size: 32px;
						color: #fffefe;
					}
					p{
						font-size: 14px;
						color: #fffefe;
						line-height: 26px;
						margin-top: 20px;
					}
				}
			}	
		}
		.row-bottom{
			margin-bottom: 102px;
		}
	}
}
.game{
	background-color: #ffffff;
	.container{
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 84px;
			h1{
				margin: 0;
				font-size: 35px;
			}
		}
	}
	.game-content{
		margin-top: 44px;
		>.row{
			margin-bottom: 40px;
		}
		video{
			object-fit: fill;
		}
		.left-side{
			.row-1{
				p{
					text-align: center;
					color: #2a2a2a;
					margin-top: 10px;
				}
				img:hover{
					opacity: 0.6;
				}
				img:hover +p{
					color: #6a6a6a;
				}
			}
		}
	}
}
.cooperation{
	padding-bottom: 45px;
	background-color: #f4f4f4;
	.cooperation-text{
		margin-bottom: 32px;
		padding-top: 41px;
		h1{
			font-size: 30px;
			span{
				font-size: 12px;
				color: #bcbcbc;
			}
		}
	}
	.cooperation-img{
		margin-bottom: 22px;
		img{
			border: 1px solid #dddddd;
			transition: all 1s;
		}
		img:hover{
			transform: scale(2,2);
		}
	}
}
@media (max-width:678px) {
	body{
		
		.engine{
			padding-top: 0;
			.container{
				padding-bottom: 0;
				.row{
					h2{
						font-size: 20px;
						text-align: center;
					}
					p{
						font-size: 14px;
						text-align: center;
					}
					>.col-md-8{
						margin-top: 0;
						>.row{
							.col-md-6{
								margin-bottom: 0;
								h4{
									text-align: center;
									margin-top: 10px;
									font-size: 18px;
								}
								.eng-imgWarp{
									margin: 0 auto;
								}
							}
						}
					}
				}
			}
			.container{
				background-image: none;
			}
		}
		.game{
			>.container{
				.title{
					display: block;
					margin-top: 20px;
					h1{
						font-size: 20px;
						text-align: center;
					}
					p{
						text-align: right;
						margin-top: 5px;
					}
				}
			}
			.game-content{
				margin-top: 0;
				>.row{
					>.col-md-5{
						video{
							width: 286px;
						}
					}
				}
				.left-side{
				>.row{
					.col-xs-6{
						padding: 0 45px;
					}
					p{
							text-align: center;
						}
					}
				}
			}
		}
		.advantage{		
			background-image: none;
			padding-bottom: 0;
			.container{
				.row{
					.adv-Img{
						margin-top: 0;
					}
					.adv-Text{
						margin-top: 0;
						>.row{
							h3{
								font-size: 20px;
								text-align: center;
							}
							p{
								text-align: center;
							}
							.img-adv{
								margin: 0 auto;
							}
						}
					}
				}
			}
		}
		.product{
			h1{
				padding-top: 20px;
				font-size: 20px;
			}
			.container{
				.row{
					margin-top: 20px;
					.pro-img{
						.text-left{
							h5{
								font-size: 20px;
								
							}
							p{
								font-size: 10px;
							}
						}
					}
				}
				.row-bottom{
					margin-bottom: 20px;
				}
			}
		}
	}
}